<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var="bp" value="${pageContext.request.contextPath}"/>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>商品管理</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body background="${bp}/static/images/3.jpg">

<div style="margin-left: 500px ;margin-top: 100px">
    <!-- 按钮：用于打开模态框 -->
    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal1">
        添加商品
    </button>

            <table>
                    <tr>
                        <div style="margin-left: 20px">
                            <c:forEach items="${cakeList}" var="keyword" varStatus="id">
                                <td>
                                    <a href = "${bp}/cake/findByCid?cid=${keyword.cid}"><img width="120px" height="110px" src="${keyword.image}"></a>><br>
                                    ${keyword.cname}<br> 价格：${keyword.price}<br>
<%--                                    <button onclick="deleteById(${keyword.cid})">删除</button>--%>
<%--                                    <button onclick="findById(${keyword.cid})">更新</button><br>--%>
                                </td>
                            </c:forEach>
                        </div>
                    </tr>
            </table>

    <!-- 模态框（Modal） -->
    <div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel1" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                        &times
                    </button>
                    <h4 class="modal-title" id="myModalLabel1">
                        添加商品
                    </h4>
                </div>
                <div class="modal-body">
                    名&nbsp;&nbsp;&nbsp;字:<input type="text"   id="cname"><br>
                    单&nbsp;&nbsp;&nbsp;价:<input type="text"   id="price"><br>
                    数&nbsp;&nbsp;&nbsp;量:<input type="text"   id="quantity"><br>
                    祝福语:<input type="text" id="blessing"><br>
                    图&nbsp;&nbsp;&nbsp;片:<input type="text"   id="image"><br>
                    店&nbsp;&nbsp;&nbsp;铺:<input type="text" id="shopId"><br>
                </div>
                <div class="modal-footer">
                    <button onclick="add()" type="button" class="btn btn-primary">
                        添加
                    </button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>


</div>
</body>
<script type="text/javascript">
    function add() {
        var cname = $("#cname").val()
        var price = $("#price").val()
        var quantity = $("#quantity").val()
        var blessing = $("#blessing").val()
        var image = $("#image").val()
        var shopId = $("#shopId").val()
        $.ajax({
            type:"post",
            url:"${bp}/cake/insert",
            data:{"cname":cname,"price":price,"quantity":quantity,"blessing":blessing,"image":image,"shopId":shopId},
            success : function (msg) {
                if(msg == 1){
                    alert("添加成功")
                    window.location.reload()
                }else{
                    alert("添加失败")
                }
            }
        })
    }
    function deleteById(cid) {
        $.ajax({
            type:"get",
            url:"${bp}/cake/delete?cid=" + cid,
            success : function (msg) {
                if(msg == 1){
                    alert("删除成功")
                    window.location.reload()
                }else{
                    alert("删除失败")
                }
            }
        })
    }
</script>

</html>
